<template>
    <div class="clearfix">
        <section class="content-header">
            安全管理&nbsp;/&nbsp;安全隐患排查
        </section>
        <section class="title">
            <div class="find">
                <div class="clearfix">
                    <div class="col-md-2 clearfix">
                        <div class="form-group clearfix">
                            <label class="col-sm-4 control-label">系统：</label>
                            <div class="col-sm-8" style="padding:0">
                                <select class="form-control select2" style="width: 100%;" v-model="selSafeData.systemId">
                                    <option value="" selected>全部</option>
                                    <option v-for="lst in sysList" :value="lst.value" :key="lst.value">{{lst.name}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 clearfix">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">片区：</label>
                            <div class="col-sm-8 noPadding">
                                <select class="form-control select2" style="width: 100%;" v-model="selSafeData.areaId">
                                    <option value="" selected>全部</option>
                                    <option v-for="lst in AreaList" :value="lst.areaId" :key="lst.value">{{lst.areaName}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 clearfix">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">点位：</label>
                            <div class="col-sm-8 noPadding">
                                <select class="form-control select2" style="width: 100%;" v-model="selSafeData.siteId">
                                    <option value="" selected>全部</option>
                                    <option v-for="lst in siteList" :value="lst.siteId" :key="lst.value">{{lst.siteName}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 clearfix">
                        <div class="form-group">
                            <label class="col-md-4 control-label">排查人：</label>
                            <div class="col-md-8">
                                <input type="email" class="form-control" id="inputEmail3" disabled="disabled" :value="getUserInfo().username">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 clearfix">
                        <safe-items v-model="selSafeData.safeCheckcontent" />
                    </div>
                </div>
                <div class="clearfix" style="margin-top:15px">
                    <div class="col-md-2 clearfix">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">整改人：</label>
                            <div class="col-sm-8 noPadding">
                                <select class="form-control select2" style="width: 100%;" v-model="selSafeData.personId">
                                    <option value="" selected>全部</option>
                                    <option v-for="lst in safepeopleList" :value="lst.value" :key="lst.value">{{lst.name}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 clearfix">
                        <div class="form-group">
                            <label class="col-md-3 control-label">排查时间：</label>
                            <div class="col-md-4 noPadding">
                                <input type="text" class="form-control pull-right" id="datepicker1" placeholder="YYYY-MM-DD" v-model="selSafeData.startTime">
                            </div>
                            <div class="col-md-1 noPadding" style="line-height:34px;text-align:center">
                                --
                            </div>
                            <div class="col-md-4 noPadding">
                                <input type="text" class="form-control pull-right" id="datepicker2" placeholder="YYYY-MM-DD" v-model="selSafeData.endTime">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 clearfix">
                        <div class="form-group">
                            <label class="col-md-3 control-label">解决时间：</label>
                            <div class="col-md-4 noPadding">
                                <input type="text" class="form-control pull-right" id="datepicker3" placeholder="YYYY-MM-DD" v-model="selSafeData.finishStaerTime">
                            </div>
                            <div class="col-md-1 noPadding" style="line-height:34px;text-align:center">
                                --
                            </div>
                            <div class="col-md-4 noPadding">
                                <input type="text" class="form-control pull-right" id="datepicker4" placeholder="YYYY-MM-DD" v-model="selSafeData.finishEndTime">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 clearfix">
                        <div class="form-group">
                            <label class="col-md-4 control-label">审核状态：</label>
                            <div class="col-md-8">
                                <select class="form-control select2" style="width: 100%;" v-model="selSafeData.safeStatus">
                                    <option value="" selected>全部</option>
                                    <option value="0">未处理</option>
                                    <option value="1">未审核</option>
                                    <option value="2">已完成</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-1 clearfix" style="text-align:center">
                        <button type="button" class="btn btn-primary" @click="$refs.page.getList(1)">查询</button>
                    </div>
                    <div class="col-md-1 clearfix" style="text-align:center">
                        <button type="button" class="btn btn-primary" @click="reset()">重置</button>
                    </div>
                </div>
            </div>
            <div class="row" style="margin:0 5px">
                <router-link to="addTrouble" style="display:inline-block;margin-right:50px;">
                    <button type="button" class="btn btn-primary">
                        <i class="fa fa-plus" aria-hidden="true"></i>发现隐患</button>
                </router-link>
                <!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">
                    <i class="fa fa-sign-out" aria-hidden="true"></i>导出台账</button> -->
            </div>
        </section>
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <!-- /.box-header -->
                        <div class="box-body">
                            <table id="example2" class="table table-bordered table-hover" style="font-size:14px">
                                <thead>
                                    <tr>
                                        <th>排查时间</th>
                                        <th>系统</th>
                                        <th>片区</th>
                                        <th>点位 / 项目</th>
                                        <th>检查项目</th>
                                        <th>处理人</th>
                                        <th>审核状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-if="selSafeList.length==0">
                                        <td colspan="999">暂无数据</td>
                                    </tr>
                                    <tr v-for="item in selSafeList" :key="item.value">
                                        <td>
                                            {{item.time}}
                                        </td>
                                        <td>
                                            {{item.systemName}}
                                        </td>
                                        <td>{{item.safeArea}}
                                            <div class="line" :class="{success:item.safeStatus>=0}">
                                                <i class="fa fa-check" aria-hidden="true"></i>
                                            </div>
                                        </td>
                                        <td>{{item.safeSite}}{{item.project}}
                                            <div class="line" :class="{success:item.safeStatus>=1}">
                                                <i class="fa fa-check" aria-hidden="true"></i>
                                                <span class="line-status"></span>
                                            </div>
                                        </td>
                                        <td>{{item.safeCheck}}
                                            <div class="line" :class="{success:item.safeStatus>=2}">
                                                <i class="fa fa-check" aria-hidden="true"></i>
                                                <span class="line-status"></span>
                                            </div>
                                        </td>
                                        <td>{{item.safeDealName}}
                                        </td>
                                        <td>{{status[item.safeStatus]}}</td>
                                        <td>
                                            <router-link :to="{path:'shenhe',query:{safeId:item.safeId,status:item.safeStatus}}">查看</router-link>
                                            <!-- <router-link :to="{path:'yesTrouble',query:{safeId:item.safeId}}">办理</router-link> -->
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="col-md-4 col-md-offset-7" style="margin-top:50px;">
                                <ctrlPage :setPage="selSafe" :type="type" ref="page" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import { getUserInfo } from "@/utils/auth";
import safeArea from "@/components/common/safe/safeArea.vue";
import safeItems from "@/components/common/safe/safeItems.vue";
import safeSite from "@/components/common/safe/safeSite.vue";
import safeLimites from "@/components/common/safe/safeLimites.vue";
import safeDept from "@/components/common/safe/safeDept.vue";
import safePerson from "@/components/common/safe/safePerson.vue";
import ctrlPage from "@/components/common/ctrlPage.vue";
import utils from "@/utils";


export default {
    data() {
        return {
            type: "total, prev, pager, next, jumper",
            selSafeData: {
                systemId: '',
                areaId: '',
                siteId: '',
                personId: '',
                safeStatus: '',
                dealpersonId: getUserInfo().personId,
                safeCheckcontent: '',
                startTime: utils.nowDate(-31),
                endTime: utils.nowDate(0),
                finishStaerTime: utils.nowDate(-31),
                finishEndTime: utils.nowDate(0),
            },
            total: '',
            selSafeList: [],
            status: ['未处理', '未审核', '已完成'],
            sysList: [],
            AreaList: [],
            siteList: [],
            safepeopleList:[]
        }
    },
    components: {
        safeDept,
        safePerson,
        safeArea,
        safeItems,
        safeSite,
        safeLimites,
        ctrlPage
    },
    watch: {
        'selSafeData.systemId'() {
            this.selSafeData.areaId = ''
            this.selSafeData.siteId = ''
            if (this.selSafeData.systemId == '') {
                this.AreaList = []
                this.siteList = []
            }
            if (this.selSafeData.systemId == 'S') {
                this.getSelArea()
            }
            if (this.selSafeData.systemId == 'P') {
                this.AreaList = []
                this.getSitePs()
            }
            if (this.selSafeData.systemId == 'W') {
                this.AreaList = []
                this.getSiteWs()
            }
            if (this.selSafeData.systemId == 'PROJECT') {
                this.AreaList = []
                this.siteList = []
            }
        },
        'selSafeData.areaId'() {
            this.getselSite()
        }
    },
    mounted() {
        this.outtime()
        this.getSysList()
        this.getsafepeople()
        this.selectDate1()
        this.selectDate2()
        this.selectDate3()
        this.selectDate4()
        this.$refs.page.getList(1);
    },
    methods: {
        getUserInfo,
        outtime() {
            this.$api.safe.outtime().then(res => {
                if (res.success) {
                }
            });

        },
        selectDate1() {
            $("#datepicker1")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    startView: 'year',
                    minView: 'month'
                })
                .on("changeDate", ev => {
                    this.selSafeData.startTime = ev.target.value;
                });
        },
        selectDate2() {
            $("#datepicker2")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    startView: 'year',
                    minView: 'month'
                })
                .on("changeDate", ev => {
                    this.selSafeData.endTime = ev.target.value;
                });
        },
        selectDate3() {
            $("#datepicker3")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    startView: 'year',
                    minView: 'month'
                })
                .on("changeDate", ev => {
                    this.selSafeData.finishStaerTime = ev.target.value;
                });
        },
        selectDate4() {
            $("#datepicker4")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    startView: 'year',
                    minView: 'month'
                })
                .on("changeDate", ev => {
                    this.selSafeData.finishEndTime = ev.target.value;
                });
        },
        //查询隐患列表
        selSafe(pageIndex, pageSizes, callback) {
            this.$api.safe.selSafe({
                pageNum: pageIndex || 1,
                pageSize: pageSizes || 10,
                systemId: this.selSafeData.systemId,
                areaId: this.selSafeData.areaId,
                siteId: this.selSafeData.siteId,
                personId: this.selSafeData.personId,
                safeStatus: this.selSafeData.safeStatus,
                dealpersonId: this.selSafeData.dealpersonId,
                safeCheckcontent: this.selSafeData.safeCheckcontent,
                startTime: this.selSafeData.startTime + ' 00:00:00',
                endTime: this.selSafeData.endTime + ' 23:59:59',
                finishStaerTime: this.selSafeData.finishStaerTime + ' 00:00:00',
                finishEndTime: this.selSafeData.finishEndTime + ' 23:59:59',
            }).then(res => {
                if (res.success) {
                    console.log(res);
                    this.selSafeList = res.data.list
                    this.total = res.data.total;
                    callback(this.selSafeList, this.total);
                }
            });
        },
        //系统列表
        getSysList() {
            this.$api.safe.sys().then(res => {
                if (res.success) {
                    this.sysList = res.data
                }
            });
        },
        //重置查询条件
        reset() {
            this.selSafeData.areaId = "";
            this.selSafeData.siteId = "";
            this.selSafeData.personId = "";
            this.selSafeData.safeStatus = '';
            this.selSafeData.safeCheckcontent = '';
            this.selSafeData.startTime = utils.nowDate(-31);
            this.selSafeData.endTime = utils.nowDate(0);
            this.selSafeData.finishStaerTime = utils.nowDate(-31);
            this.selSafeData.finishEndTime = utils.nowDate(0);
        },
        //供水片区
        getSelArea(callback) {
            this.$api.safe.selArea().then(res => {
                if (res.success) {
                    this.AreaList = res.data
                }
            });
        },
        //供水点位
        getselSite() {
            this.$api.safe.selSite({
                areaId: this.selSafeData.areaId
            }).then(res => {
                if (res.success) {
                    // console.log(res);
                    this.siteList = res.data
                }
            });
        },
        //排水点位
        getSitePs() {
            this.$api.safe.sitePs().then(res => {
                if (res.success) {
                    this.siteList = res.data
                }
            });
        },
        //污水点位
        getSiteWs() {
            this.$api.safe.siteWs().then(res => {
                if (res.success) {
                    this.siteList = res.data
                }
            });
        },
        //安全员
        getsafepeople() {
            this.$api.safe.safepeople().then(res => {
                if (res.success) {
                    this.safepeopleList = res.data
                }
            });
        },
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.title {
  padding: 15px 15px 0 15px;
  .find {
    background: #fff;
    border: 1px solid #bbb;
    padding: 20px 10px 10px 0;
    border-radius: 10px;
    margin-bottom: 15px;
  }
  .control-label {
    padding: 0px;
    line-height: 34px;
    text-align: right;
  }
  .col-md-8 {
    padding: 0;
  }
}
.box {
  th {
    text-align: center;
  }
  td {
    vertical-align: middle;
    padding: 30px 20px 30px 20px;
    position: relative;
  }
  .line {
    width: 100%;
    height: 6px;
    background: #cccccc;
    float: left;
    border-radius: 5px;
    position: absolute;
    bottom: 10px;
    left: 0px;
  }
  .success {
    display: block !important;
    background: #3c8dbc;
    i {
      background: #3c8dbc;
    }
  }
  .line-status {
    display: none;
    position: absolute;
    top: 15px;
    left: 50%;
    margin-left: -19px;
    color: #3c8dbc;
    background: #fff !important;
    font-weight: bold;
  }
  i {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #cccccc;
    line-height: 24px;
    color: white;
    position: absolute;
    top: -9px;
    left: 50%;
    margin-left: -11px;
  }
}
</style>
